import { BUTTON_LABELS } from "../utils/constants";

import stickImg from "../assets/stick.png";

const Button = ({ keycode, type, mode, x, y, active = false }) => {
  return (
    <div className="absolute bg-gray-500/30 text-white rounded-full w-10 h-10 flex items-center justify-center text-sm font-bold shadow-md pointer-events-none select-none">
      {type === "click" ? (
        <div
          className={`absolute w-12 h-12 rounded-full border-3 border-white/50 cursor-move shadow-lg flex items-center justify-center ${
            active ? "border-4 border-yellow-400" : "border-3 border-white/50"
          }`}
        >
          {keycode !== null ? (
            <span className="text-white font-bold">
              {BUTTON_LABELS[keycode] || keycode}
            </span>
          ) : (
            <div className="border-1 border-white w-7 h-7 outline-none "></div>
          )}
        </div>
      ) : (
        <div
          className={`absolute ${
            mode === "move"
              ? "w-20 h-20 md:w-24 md:h-24"
              : "w-12 h-12 md:w-16 md:h-16"
          } rounded-full border-0 cursor-move shadow-lg flex items-center justify-center ${
            active ? "border-4 border-yellow-400" : "border-0"
          }`}
        >
          <img src={stickImg} className=" pointer-events-none" />
          <div className="absolute -bottom-3 left-1/2 transform -translate-x-1/2 bg-black text-white text-xs px-1 w-full text-center rounded">
            {mode === "move" ? "移动" : mode === "skill" ? "技能" : "视角"}
          </div>
        </div>
      )}
    </div>
  );
};

export default Button;
